<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Translate</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

    google.load("language", "1");
    google.setOnLoadCallback(init);
    
    function init() {
      var src = document.getElementById('src');
      var dst = document.getElementById('dst');
      var i=0;
      for (l in google.language.Languages) {
        var lng = l.toLowerCase();
        var lngCode = google.language.Languages[l];
        if (google.language.isTranslatable(lngCode)) {
          src.options.add(new Option(lng, lngCode));
          dst.options.add(new Option(lng, lngCode));
        }
      }
      dst.value = "zh-CN";

      google.language.getBranding('branding', { type : 'vertical' });
    }

    function translate(){
      var text = document.getElementById("text").value;
      document.getElementById("translation").innerHTML = "translating...";
      var src;
      var dest
      if(document.getElementById("moreOption").checked){
        src = document.getElementById('src').value;
        dest = document.getElementById('dst').value;
      }else{
        src = "";
        dest = "zh-CN";
      }
      google.language.translate(text, src, dest,
                                function(result) {
                                
        var translated = document.getElementById("translation");
        if (result.error || !result.translation){
          translated.innerHTML = "<span id=\"errmsg\">error occured,plz try ag.</span>";
        }else{
          document.getElementById('src').value = result.detectedSourceLanguage;
          translated.innerHTML = result.translation;
        }
      });
    }
    function trigOption(){
      var block = document.getElementById("options");
      var chk = document.getElementById("moreOption");
      if(chk.checked){
        block.style.display = "inline";
      }else{
        block.style.display = "none";
      }
      return true;
    }
    function revert(){
      var src = document.getElementById('src').value;
      var dest = document.getElementById('dst').value;
      document.getElementById('src').value = dest;
      document.getElementById('dst').value = src;
    }
    </script>
    <style type="text/css">
    #options { display: none;}
    #translation { border: solid 1px #A512EF; min-height:100px;}
    #errmsg { color:#F00;}
    </style>
  </head>
  <body>
    <div><textarea id="text" rows="7" cols="100"></textarea></div>
    <input type="button" value="translate" onclick="translate()">
    <input type="checkbox" id="moreOption" onclick="return trigOption();"><label for="moreOption">unsatisfy?</label>
    <span id="options">
      <select name="src" id="src"></select>
      >>
      <select name="dst" id="dst"></select>
      <input type="button" value="revert" onclick="revert()">
    </span>
    <br/>
    Result:<br/>
    <textarea id="translation" rows="7" cols="100"></textarea>
    <div id="branding"></div>
  </body>
</html>